<template>
  <view>
    <!-- 处方信息 -->
    <view class="section-card">
      <view class="prescription-header">
        <view class="title-container">
          <view class="section-title">用药指导</view>
        </view>
      </view>
      <view class="medicine-list">
        <view class="medicine-item" v-for="(item, index) in medicines" :key="index">
          <view class="medicine-name">{{ item.name }}</view>
          <view class="medicine-meta">
            <text>用法用量：{{ item.dosage }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    medicines: {
      type: Array,
      default: () => []
    },
  }
}
</script>

<style lang="scss" scoped>
.section-card {
  margin-bottom: 80rpx;
  border-radius: 16rpx;
  padding: 24rpx 24rpx 0 24rpx;
  box-shadow: 0 8rpx 14rpx rgba(0, 0, 0, 0.08);
  background: linear-gradient(#F0FEFF 0%, #fff 100%);
}

.title-container {
  position: relative;
  margin-bottom: 8rpx;
}

.section-title {
  position: relative;
  font-size:34rpx;
  font-weight: bold;
  color: #333;
  z-index: 1;
}

.prescription-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.medicine-list {
  margin-bottom: 20rpx;
}

.medicine-item {
  border-bottom: 1px solid #f0f0f0;
  padding: 16rpx 6rpx 24rpx 6rpx;
  margin-bottom: 16rpx;
}

.medicine-name {
  font-size: 30rpx;
  color: #333;
}

.medicine-meta {
  display: flex;
  font-size: 24rpx;
  color: #888;
  margin-top: 8rpx;
}
</style>